<template>
	<div class="login-main">
		<div class="login-title">
			<img src="../assets/image/logo.png">
		</div>
		<div class="login-con">
			<form class="clear">
				<div class="form-item">
					<i></i>
					<input type="text" v-model="username" placeholder="手机号码">
				</div>			
				<div class="form-item">
					<i></i>
					<input type="password" v-model="password" placeholder="密码">
				</div>							
				<input type="button" class="sub" value="登录" v-on:click="submit">
				<router-link to="/register" class="register">注册</router-link>
				<router-link to="/forgetpassword" class="forget">忘记密码</router-link>
			</form>		
			<div class="other-main">
				<div class="other-title"><span>第三方登录</span></div>
				<div class="other-con">
					<a href="javascript:;"><img src="../assets/image/qq.png">qq</a>
					<a href="javascript:;"><img src="../assets/image/wb.png">微博</a>
					<a href="javascript:;"><img src="../assets/image/wx.png">微信</a>
				</div>		
			</div>				
		</div>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'
import MessageBox from 'mint-ui/lib/message-box'
import 'mint-ui/lib/message-box/style.css'
import VueResource from '../assets/js/vue-resource'
Vue.use(VueResource)

export default {
  	name: 'app',
  	data () {
    	return {
	  		password: '',
	  		username: '',
    	}
  	},
  	methods: {  		
  		//确认注册
  		submit () {
  			this.$http.post('/laravel/public/login', {
  					username: this.username, 
  					password: this.password
  				})
  			.then(response => {
  				MessageBox('提示', response.body.msg);  		

  				//暂时未完成先跳转到个人中心		
  				if(response.body.status == "success") {
  					this.$router.push('/personal');
  				}
  			}, response => {
  				MessageBox('提示', response.body.msg);
  			})
  		}
  	}
}
</script>
<style lang="scss"> 
.login-main {
    background: linear-gradient(to right, #7bcacc 0%, #49a1a7 100%);
    height: 100%;	

	.login-title {
		padding-top: 3.7rem;
		margin: 0 auto 1.325rem;
		width: 5.25rem;
		height: 3.325rem;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.login-con {
		margin: 0 auto;
		width: 11.525rem;
	}

	.form-item {	
	    height: 2.4rem;	  
	    border-bottom: 2px solid #fff;
	    font-size: 0.7rem;

		input {
			margin-top: 1rem;
		    height: 1.4rem;
		    width: 100%;
		    border: none;
		    outline: none;
		    color: #fff;
		    background: transparent;
		}		

		a {
			color: #fff;
			font-size: 0.5rem;
		}
	}

	.sub {
		display: block;
		margin: 1.45rem auto 0;
		width: 11.525rem;
		height: 1.775rem;
		font-size: 0.75rem;
		background: #fff;
		color: #6ad2d3;
		border: none;
		outline: none;
	}

	.register{
		float: left;
	    line-height: 1.45rem;
	    text-align: right;
	    color: #fff;		
	}

	.forget {
		float: right;
	    line-height: 1.45rem;
	    text-align: right;
	    color: #fff;
	}

	.other-main {		
		margin: 0 auto;
		width: 9.6rem;

		.other-title {
			position: relative;
			margin-bottom: 0.9rem;
			text-align: center;
			font-size: 0.45rem;		
			color: #fff;

			span {
				display: block;
				margin: 0 auto;
				width: 3.55rem;
				background: transparent;
			}

			&:after {
				display: block;
				content: '';
				position: absolute;
				bottom: 0.3rem;
				right: 0;
				width: 3.05rem;
				height: 1px;
				background: #fff;
			}

			&:before {
				display: block;
				content: '';
				position: absolute;
				bottom: 0.3rem;
				left: 0;
				width: 3.05rem;
				height: 1px;
				background: #fff;
			}			
		}

		.other-con {
			text-align: center;

			a {
				display: inline-block;
				width: 1.175rem;
				height: 1.175rem;
				text-align: center;
				font-size: 0.45rem;
				color: #fff;

				img{
					margin-bottom: 0.35rem;
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			a:first-child {
				float: left;
			}

			a:last-child {
				float: right;
			}
		}
	}
}
</style>
